@import "init";

body {
  position: relative;
  overflow: hidden;
  //background-color: @pink1;

  .loginView {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background: @pink1;
    z-index: 100;

    text-align: center;
    overflow-y: scroll;

    span, button {
      display: block;
      line-height: 2em;
    }

    button {
      margin: 10px auto;
      .lineBtn();
    }

    input {
      .inputLine();
    }

    .loginNote {
      line-height: 2em;
      margin: 5px;
      padding: 5px;
    }
  }

  .topView {
    height: 90vh;
    width: 400%;
    //overflow: hidden;
    position: relative;
    left: -100%;
    top: 0;

    .view {
      width: 25%;
      height: 100%;
      //position: absolute;
      float: left;
      //outline: solid 1px;
    }

    // 相对于一个view里面的上区域和下区域
    .topArea {
      @H: 50px;
      height: @H;

      .checkItem {
        float: left;
        width: 50%;
        height: @H;
        line-height: @H;
        text-align: center;
        .CHB();
        font-size: 20px;

        .textBtnUtil();
      }
    }

    .bottomArea {
      padding: 20px 10px 200px 10px;
      //background-color: hotpink;
    }

    .v1 {
      //background-color: pink;

      .topArea {
        //background-color: hotpink;
        @H1: 30px;
        @H2: 30px;
        height: @H1+@H2;

        .titleLine {
          position: relative;
          height: @H1;
          width: 100%;
          line-height: @H1;
          text-align: center;
          .CHB();

          @M: 30px;

          button {
            position: absolute;
            width: 50px;
            font-size: 20px;
            height: @H1;
            border-radius: 1000px;
          }

          .leftPageBtn {
            font-size: 12px;
            left: @M;
          }

          .rightPageBtn {
            font-size: 12px;
            right: @M;
          }
        }

        .topLineBtn {
          height: @H2;
          text-align: center;

          .btn {
            display: inline-block;
            height: 100%;
            margin-left: 10px;
            margin-right: 10px;
            line-height: @H2;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 100px;
            .btnUtil();
          }
        }
      }

      .page {
        //background-color: lightgoldenrodyellow;
        height: 500px;

        .ruler, .table {
          float: left;
          height: 100%;
        }

        .ruler {
          width: 10%;

          .block {
            height: 5%; // 目前一共有20个小时，所以是20格子。1/20
            width: 100%;
            border-top: solid 1px;
            text-align: center;

            .num {
              width: 20px;
              display: inline-block;
              font-size: 10px;
              transform: translateY(-12px);
            }
          }
        }

        .table {
          width: 90%;
          height: 100%;
          position: relative;

          .alertPanel {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 5;

            h2 {
              color: white;
              background-color: rgba(0, 0, 0, 0.5);
            }

            button {
              display: block;
              margin: 10px auto;
              font-size: 20px;
              line-height: 2em;
              height: 2em;
              padding-left: 20px;
              padding-right: 20px;
              border-radius: 1000px;
            }
          }

          .alertModifyTime {
            .detail {
              .Menu();
              height: 50%;

              .name {
                text-align: center;
                .CHB();
              }

              .timeContent {
                text-align: center;
              }
            }
          }

          .alertChangeMode {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;

            .close {
              position: absolute;
              right: 0;
              top: 0;
              width: 35px;
              height: 35px;
              line-height: 35px;
              font-size: 25px;
              background-color: darkred;
              color: white;
              .textBtnUtil();
            }

            .currentPanel {
              max-height: 80%;
              overflow-y: scroll;
              margin: 0 auto;
              //outline: solid 1px;

              display: flex;
              justify-content: center;
              flex-wrap: wrap;
              //outline: solid 1px;

              .time {
                display: flex;
                width: 60px;
                height: 60px;
                align-items: center;
                margin: 5px;
                border-radius: 5px;
                //margin: 10px auto;
                //width: 60%;

                position: relative;

                .name {
                  text-align: center;
                  line-height: 2em;
                  margin: 0 auto;
                }

                .del {
                  position: absolute;
                  right: 0;
                  top: 0;
                  .btnUtil();
                }
              }
            }

            .KindTitle {
              text-indent: 0.5em;
              line-height: 2em;
              border-radius: 1000px;
            }
          }

          .Menu() {
            width: 60%;
            margin: 20px auto;
            height: 70%;
            border: solid 1px white;
            border-radius: 30px;
            padding: 10px;
            overflow-y: scroll;
            background-color: rgba(255, 255, 255, 0.8);
          }

          .alertAddTime {
            .addMenu {
              .Menu();

              .kind {
                //width: 50px;
                height: 2em;
                line-height: 2em;
                margin: 20px;
                //background-color: royalblue;
                text-align: center;
                border: solid 2px;
                border-radius: 1000px;
                .CHB();
              }
            }


          }

          .marginT {
            height: 30px; // 这是一个定死的数字 js 使用到了30

            .titleBlock {
              float: left;
              height: 100%;
              width: 14.2857142857142%;

              .weekTitle, .dateTitle {
                font-size: 9px;
                text-align: center;
              }

            }
          }

          .dayCol {
            width: 14.2857142857142%;
            height: 100%;
            //float: left;
            position: absolute;
            z-index: 3;
          }

          .tableBgCanvas {
            position: absolute;
            z-index: 1;

            &:hover {
              cursor: pointer;
            }
          }

        }
      }
    }

    .v2 {
      overflow-y: scroll;

      .bottomArea {

        .checkItemArea {
          //overflow-y: scroll;
          .addBtn {
            display: block;
            margin: 5px auto;
            line-height: 2em;
            .CHB();
            font-size: 22px;
            padding: 0 20px 0 20px;
            border-radius: 1000px;
          }

          .addWeekEventAlert {
            text-align: center;
            margin-bottom: 20px;

            .title {
              height: 2em;
              text-indent: 0.5em;
              border-radius: 100px;
            }

            button {
              .choiceBtn();
            }
          }

          /// 这个页面的两个切换输入区域都有
          /// 确认添加和取消添加两个按钮
          .choiceBtn() {
            font-size: 15px;
            height: 2em;
            line-height: 2em;
            padding: 0 20px 0 20px;
            margin: 0 5px 0 5px;
            border-radius: 200px;
            .btnUtil();
          }

          .addDDLAlert {
            text-align: center;

            input {
              display: block;
              margin: 5px auto;
            }

            button {
              .choiceBtn();
            }
          }

          .item {
            position: relative;
            padding: 10px 0 10px 20px;
            margin-bottom: 15px;

            .eventName {
              .CHB();
              font-size: 25px;
            }

            .note, .del {
              position: absolute;
              top: 0;
              font-size: 23px;
              .btnUtil();
            }

            .note {
              right: 40px;
              //filter: brightness(50%);
            }

            .dayName {
              .CHB();
              font-size: 25px;
              text-align: center;
            }

            .noteWords {
              .CHB();
              text-align: center;
              font-size: 22px;

              .finalDay {
                color: red;
                .CHL();
              }
            }

            .del {
              right: 0;
              .delEmoji();
            }
          }
        }
      }
    }

    .v3 {
      //background-color: green;
      overflow-y: scroll;

      .topArea {
        @H: 50px;
        height: @H;
        //background-color: pink;

        .checkItem {
          float: left;
          width: 50%;
          height: @H;
          line-height: @H;
          text-align: center;
          .CHB();
          color: black;
          font-size: 20px;
        }
      }

      .bottomArea {
        //height: 90%;
        padding: 20px 10px 200px 10px;
        //background-color: hotpink;

        .inputArea {
          //height: 50px;
          padding: 10px;

          .inputBox {
            //width: 90%;
            text-indent: 2em;
            .CHL();
            line-height: 2em;
            overflow-y: auto;
            overflow-x: hidden;
            //background-color: pink;
            padding: 20px 5px 20px 5px;

            &:empty:before {
              content: '在这里输入内容...';
              //color: gray;

            }
          }

          .btnLine {
            text-align: center;
            overflow: hidden;

            .lineBtn {
              display: inline-block;
              //float: left;
              margin: 5px;
              padding: 5px 20px 5px 20px;

            }

            .clear {

            }

            .submit {

            }
          }

        }

        .checkItemArea {
          overflow: hidden;
          //background-color: lightpink;

          .item {
            margin: 20px;
            position: relative;

            .time {
              text-align: center;
              .CHB();
            }

            .content {
              text-indent: 2em;
              .CHL();
              line-height: 2em;
            }

            .edit, .del {
              position: absolute;
              .CHB();
              //color: white;
              .btnUtil();
            }

            .edit {
              right: 30px;
              top: 0;
            }

            .del {
              right: 0;
              top: 0;
              .delEmoji();
            }
          }
        }
      }
    }

    .v4 {
      overflow-y: scroll;

      .firstLine {
        line-height: 2em;
        text-align: center;
        .CHB();
        font-size: 22px;
      }

      .choiceStyle {
        width: 60%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        //outline: solid 1px;

        .style {
          width: 20%;
          height: 100px;
          margin: 20px auto;
          line-height: 100px;
          border-radius: 1000px;
          border: solid 5px;
          font-size: 20px;
          text-align: center;
          .btnUtil();
        }
      }

      .note {
        text-align: center;
        line-height: 2em;
      }

      //.timeKind {
      //  width: 60%;
      //  //height: 300px;
      //  margin: 0 auto;
      //
      //}

      .changeAccount {
        display: block;
        margin: 20px auto;
        border-radius: 500px;
        line-height: 2em;
        padding-left: 20px;
        padding-right: 20px;

      }
    }
  }

  .downMenu {
    height: 10vh;
    background-color: gray;

    .item {
      float: left;
      width: 25%;
      height: 100%;
      .textBtnUtil();


      p {
        //outline: solid 1px;
        text-align: center;

        &:nth-child(1) {
          height: 70%;
          font-size: 25px;
        }

        &:nth-child(2) {
          height: 25%;
          font-size: 10px;
        }

      }
    }
  }
}

@keyframes bubbleRaise {
  from {
    top: 20%;
  }
  to {
    top: 10%;
  }
}

@keyframes bubbleExpand {
  from {
    top: 10%;
    transform: scale(1);
    opacity: 100%;
  }
  to {
    top: 10%;
    transform: scale(2);
    opacity: 0;
  }
}

/**
  气泡组件
 */
.bubble {
  padding: 10px 50px 10px 50px;
  border-radius: 1000px;
  line-height: 2em;
  font-size: 22px;
  font-weight: bolder;
  position: absolute;
  left: 20%;
  border: solid 2px;
  background-color: rgba(255, 255, 255, 0.5);
  top: 20%;

  animation-name: bubbleRaise;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
